<template>
  <div class="loginBox">
    <common-bg></common-bg>
    <div class="fixedBox">
      <div class="loginFrom">
        <div>
          <div class="title">
            <div class="logo">
              <img src="@/assets/imgs/logo_slices/logo.png" />
            </div>
            <div class="nama">Forgot password</div>
          </div>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="0px"
            style="width: 306px"
          >
            <el-form-item prop="phone">
              <el-input
                v-model="ruleForm.phone"
                placeholder="请输入11位手机号码"
                maxlength="11"
              >
                <template slot="prepend"
                  >+86 <img src="@/assets/imgs/选择.png" alt="" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="code">
              <el-row :gutter="20">
                <el-col :span="16" style="padding-right: 0">
                  <el-input
                    style="border-radius: 4px 0 0 4px"
                    prefix-icon="iconfont icon-yanzhengma2"
                    v-model="ruleForm.code"
                    placeholder="请输入验证码"
                  ></el-input>
                </el-col>
                <el-col :span="8">
                  <el-button
                    class="getcode"
                    :class="{ disable: cdTimer }"
                    @click="getCode"
                  >
                    {{ codeBtnTxt }}</el-button
                  >
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                prefix-icon="iconfont icon-mima"
                v-model="ruleForm.password"
                placeholder="6~32位密码,注意区分大小写"
                type="password"
              ></el-input>
            </el-form-item>
            <div class="login-btn">
              <el-button
                type="primary"
                size="medium"
                @click="submitForm('ruleForm')"
                >确认修改</el-button
              >
            </div>
          </el-form>
          <div class="registerBtn">
            <el-button type="text" size="medium" @click="goLogin"
              >使用已有账户登录</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import commonBg from "./components/commonBg.vue";
export default {
  components: {
    commonBg,
  },
  data() {
    return {
      /* 修改密码表单数据 */
      ruleForm: {
        phone: "",
        code: "",
        password: "",
      },
      /* 修改密码表单失焦判断 */
      rules: {
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
      /* 防止二次点击 */
      isClick: true,
      /* 是否禁用 */
      cdTimer: null,
      codeBtnTxt: "获取验证码",
    };
  },
  methods: {
    getCode() {},
    /* 确认修改 */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 防止二次点击
          console.log(!this.isClick);
          if (!this.isClick) return;
          this.isClick = false;
          let send = JSON.parse(JSON.stringify(this.ruleForm));
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /* 返回登陆页面 */
    goLogin() {
      this.$router.push({
        path: "/login",
      });
    },
  },
};
</script>

<style scoped lang="less">
.loginBox {
  width: 100%;
  height: 100%;
  position: relative;
}
.fixedBox {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loginFrom {
  width: 386px;
  height: 481px;
  background: #ffffff;
  opacity: 1;
  border-radius: 0px;
  display: flex;
  justify-content: center;
  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0 63px;
    .logo {
      width: 59px;
      height: 59px;
      margin-right: 10px;
      & img {
        width: 100%;
        height: 100%;
      }
    }
    .nama {
      font-size: 30px;
      font-weight: bold;
      color: #3963fd;
      opacity: 1;
    }
  }
  .getcode {
    width: 100px;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    opacity: 1;
    height: 40px;
    border: none;
    background: #ff9d2d;
    position: relative;
    left: -16px;
    border-radius: 0 3px 3px 0;
  }
  .login-btn {
    text-align: center;
    margin: 35px 0 28px;
  }

  .login-btn button {
    width: 100%;
    height: 48px;
    font-size: 16px;
    background: #3963fd;
    box-shadow: 0px 10px 25px rgba(57, 99, 253, 0.61);
    opacity: 1;
    border-radius: 0px;
  }
  .registerBtn {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    opacity: 1;
    text-align: center;
    & button {
      padding: 0;
      color: #ff9d2d;
    }
  }
}
/deep/.el-input-group__prepend {
  color: #000;
}
/deep/.el-input__icon {
  color: #3963fd;
}
</style>
